<template>
  <view class="content">
    <view class="containerBase">
      <view> </view>
      <view>
        <view>推拉流: </view>
        <video v-if="localStream" ref="localVideo" id="localVideo" :controls="controls" autoplay></video>
        <video v-if="secondStream" ref="secondVideo" id="secondVideo" :controls="controls" autoplay></video>
        <video v-for="item in remoteStreams" :controls="controls" :ref="item.id" :id="item.id" :key="item.id" autoplay></video>
      </view>
    </view>
    <view class="index-container">
      <view class="input-container">
        <input v-model="roomID" placeholder="请输入房间 ID" placeholder-style="color: #b3b3b3; font-size: 14px;" class="room-input" />
        <text class="tip"></text>
      </view>
      <view class="button-container">
        <view>推拉流:</view>
        <button @click="openRoom(2)" class="roomBtn">屏幕共享推流</button>
        <button @click="openRoom(0)" class="roomBtn">加入房间(不推流)</button>
        <button @click="replateVideoSrc" class="roomBtn">替换视频</button>
        <button @click="logout" class="roomBtn">退出房间</button>
        <view>推多路流:</view>
        <button @click="openRoom(3)" class="roomBtn">进入房间(推流)</button>
        <button @click="screenShare()" class="roomBtn">屏幕共享推流</button>
      </view>
    </view>
  </view>
</template>

<script>
import { Express } from "../../utils/h5/h5_common"

export default {
  data() {
    return {
      controls: true,
      roomID: "126",
      localStream: null,
      secondStream: null,
      remoteStreams: [],
      express: null,

      devices: {},
      microphone: null,
      camera: null,
      speaker: null
    }
  },
  watch: {
    remoteStreams(newVal, oldVal) {
      this.renderRemoteVideo()
    }
  },

  methods: {
    async openRoom(type) {
      await this.express.login(this.roomID)
      // 0 不推流 1 推流
      if (type !== 0) {
        // 屏幕共享推流
        if (type === 2) {
          const createOption = {
            screen: true
          }
          this.localStream = await this.express.createStream(createOption)
        }

        // 推摄像头流
        if (type === 3) {
          this.localStream = await this.express.createStream()
        }

        this.$nextTick(() => {
          this.$refs.localVideo.$refs.video.srcObject = this.localStream // 对 video组件内真实的video元素 进行赋值
          console.log("mytag this.express", this.express)
        })
      }
    },

    async screenShare() {
      const createOption = {
        screen: true
      }
      this.secondStream = await this.express.createSecondStream(createOption)

      this.$nextTick(() => {
        this.$refs.secondVideo.$refs.video.srcObject = this.secondStream
        console.log("mytag this.express", this.express)
      })
    },

    // 拉流，video设置srcObject
    renderRemoteVideo() {
      this.$nextTick(() => {
        this.remoteStreams.forEach((streamItem) => {
          this.$refs[streamItem.id][0].$refs.video.srcObject = streamItem
        })
      })
    },

    async logout() {
      if (!this.express.hasLogin) {
        uni.showToast({
          title: "尚未登录",
          duration: 2000,
          icon: "none"
        })
        return
      }
      this.express.logout()
      this.localStream = null
      this.remoteStreams = []
    },

    async initExpress() {
      this.express = new Express()
      this.express.init()
      this.remoteStreams = this.express.remoteStreams
      await this.express.checkSystemRequirements()
    }
  },

  async mounted() {
    this.initExpress()
  }
}
</script>

<style>
.containerBase {
  height: 73vh;
  max-height: 500px;
  padding: 10rpx;
}

.canvas1,
video {
  width: 45vw;
  height: 45vw;
  max-width: 200px;
  max-height: 200px;
  margin: 5rpx;
}

.canvas1 {
  background: black;
}

.index-container {
  border-top: 1px slategrey solid;
}
.input-container {
  text-align: center;
}
.button-container {
  border-top: 1px slategrey solid;
  padding: 5px 0 0 5px;
}
.room-input {
  height: 80rpx;
  border-bottom: 1px solid rgba(13, 112, 255, 0.5);
}
button[type="primary"] {
  background-color: red;
}

.roomBtn {
  display: inline-block;
  margin: 1vw;
  font-size: 20rpx;
  background: rgba(13, 112, 255, 0.5);
  color: #fff;
  overflow: visible;
}
</style>
